<div id="metadata" title="Home - Office UI Fabric" description="The official front-end framework for building experiences that fit seamlessly into Office and Office 365." style="visibility:hidden"></div>
<style>
  body,
  html {
    margin: 0;
    padding: 0;
  }
  .loading {
    align-items: center;
    background-color: #212121;
    border-top: 50px solid #000;
    display: flex;
    height: 100vh;
    justify-content: center;
  }
</style>

<div id="main">
  <div class="loading">
    <img
      class="loadingImage"
      src="https://static2.sharepointonline.com/files/fabric/fabric-website/images/spinner.gif"
      alt="Loading"
      width="32"
      height="32"
    />
  </div>
</div>

<script type="text/javascript">
  var isProduction = location.hostname === 'developer.microsoft.com';
  var devhost = getParameterByName('devhost');
  var entryPointFilename = 'fabric-sitev5';
  var appPath = '';
  var Flight = {};
  var jsSuffix = '.min.js';

  if (devhost !== null) {
    if (devhost === '') {
      devhost = location.origin + location.pathname.replace('homepage.htm', '');
    }
    appPath = devhost;
    Flight.baseCDNUrl = devhost;
    loadAppScripts();
  } else {
    var fabricVersions = [5, 6, 7];

    var fabricVersion = Number(
      getParameterByName('fabricVer') || window.sessionStorage.getItem('fabricVer') || fabricVersions[fabricVersions.length - 1]
    );

    if (fabricVersions.indexOf(fabricVersion) > -1) {
      window.sessionStorage.setItem('fabricVer', fabricVersion);
    }

    var prefixVer =
      fabricVersions.indexOf(fabricVersion) > -1 && fabricVersion !== fabricVersions.slice(-1)[0] ? 'v' + fabricVersion + '-' : '';

    var configPrefix = 'fabric-website-' + prefixVer + (isProduction ? 'prod' : 'df');

    var configScript = ['https://fabricweb.azureedge.net/fabric-website/manifests/' + configPrefix + '.js'];

    loadScripts(configScript, function() {
      if (window.Flight) {
        appPath = window.Flight.baseCDNUrl;
        loadAppScripts();
      }
    });
  }

  function loadScripts(array, callback) {
    var loader = function(src, handler, failHandler) {
      var script = document.createElement('script');
      script.src = src;
      script.onload = script.onreadystatechange = function() {
        script.onreadystatechange = script.onload = null;
        handler();
      };

      script.onerror = function() {
        script.onerror = null;
        if (failHandler) {
          failHandler();
        }
      };

      var head = document.getElementsByTagName('head')[0];
      (head || document.body).appendChild(script);
    };
    (function run() {
      if (array.length != 0) {
        const scriptName = array.shift();
        loader(scriptName, run, function() {
          jsSuffix = '.js';
          loader(scriptName.replace('.min.js', '.js'), run);
        });
      } else {
        callback && callback();
      }
    })();
  }

  function loadAppScripts(appPath) {
    var scripts = [appPath + entryPointFilename + '.min.js'];

    if (!window.React) {
      // Only needed for Fabric 5 and 6 (7 bundles React)
      // DO NOT replace 16.3.2 with a newer version!
      var reactPath = '//cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js';
      var reactDomPath = '//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js';

      scripts.unshift(reactDomPath);
      scripts.unshift(reactPath);
    }

    loadScripts(scripts);

    window.MonacoEnvironment = {
      getWorkerUrl: function(workerId, label) {
        var workerName = label === 'typescript' || label === 'javascript' ? 'ts.worker' : 'editor.worker';
        return (
          'data:text/javascript;charset=utf-8,' +
          encodeURIComponent(
            'self.MonacoEnvironment = { baseUrl: "' + appPath + '" }; ' + 'importScripts("' + appPath + workerName + jsSuffix + '");'
          )
        );
      }
    };
  }

  function getParameterByName(name, url) {
    if (!url) {
      url = location.href;
    }
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }
</script>
